<template>
    <div class="payment-page">
      <div class="payment-background"></div>
      <div class="payment-content">
        <h2>支付页面</h2>
        <div class="payment-method">
          <h3>选择支付方式</h3>
          <el-select v-model="paymentMethod" placeholder="请选择支付方式">
            <el-option label="微信支付" value="wechat"></el-option>
            <el-option label="支付宝支付" value="alipay"></el-option>
          </el-select>
        </div>
        <div class="payment-amount">
          <h3>输入支付金额</h3>
          <el-input-number v-model="paymentAmount" :min="0" :step="1"></el-input-number>
        </div>
        <div class="payment-confirm">
          <el-button type="primary" @click="confirmPayment">确认支付</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        paymentMethod: 'wechat',
        paymentAmount: 0
      };
    },
    methods: {
      confirmPayment() {
        // 处理支付逻辑
        console.log(`支付方式：${this.paymentMethod}，支付金额：${this.paymentAmount}`);
      }
    }
  };
  </script>
  
  <style scoped>
  .payment-page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .payment-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/payment-background.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    z-index: -1;
    animation: background-animation 10s infinite;
  }
  
  @keyframes background-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .payment-content {
    position: relative;
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    animation: content-animation 1s;
  }
  
  @keyframes content-animation {
    0% {
      opacity: 0;
      transform: translateY(-50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .payment-method,
  .payment-amount,
  .payment-confirm {
    margin-bottom: 20px;
  }
  
  @media screen and (max-width: 600px) {
    .payment-content {
      width: 90%;
    }
  }
  </style>
  